<template>
    <div>
        <el-dialog @closed="toNull()" title="设置权限" :visible.sync="accFlag" >
            <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
            <div>
                <el-checkbox-group v-model="accountToRuleParam.checkList"  >
                    <el-checkbox v-for="rule in rules" :label="rule.ruleId" :key="rule.ruleId">{{rule.ruleName}}</el-checkbox>

                </el-checkbox-group>
            </div>
            <!-- 弹出框底部的两个按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="toNull()">重 置</el-button>
                <el-button type="primary"  @click="show">提 交</el-button>
            </div>
        </el-dialog>




        <el-table
                :data="accounts"
                style="width: 100%"

        >


            <el-table-column
                    prop="accountId"
                    label="id"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="accountName"
                    label="账号名字"
                    width="70">
            </el-table-column>

            <el-table-column
                    prop="userId"
                    label="用户id"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名字"
                    width="100"
            >
            </el-table-column>

            <el-table-column label="操作"
                             width="300">
                <template slot-scope="scope">

                    <el-button @click="loadAccountRules(scope.row.accountId)" type="warning" icon="el-icon-edit" circle >授权</el-button>
                    <!--        <el-button @click="delOne(scope.row.movieId)" type="danger" icon="el-icon-delete" circle ></el-button>-->
                </template>
            </el-table-column>


        </el-table>
        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="this.total" :page-size="findAccountParam.pageSize"
                    :current-page="findAccountParam.pageIndex"
                    @current-change="pageChange"
            >
            </el-pagination>
        </div>

    </div>

</template>

<script>
export default {
  name: "account",
    data(){
      return{
          accounts:null,
          findAccountParam:{
              pageIndex:1,
              pageSize:10,
              keyWord:null
          },
          total:null,
          rules:null,
          accFlag:false,
          accountToRuleParam:{
              checkList:[],
              accountId:null,
          }

      }
    },
    methods:{
      getAccounts(){
          this.$http.post("woniuAccount/like",this.findAccountParam).then(
              resp=>{
                  this.accounts = resp.data.object.accountDtos;
                  this.pageIndex = resp.data.object.pageIndex;
                  this.total = resp.data.object.total;
              }
          )
      },
        show(){
          this.$http.post("woniuAccountRule/changeRule",this.accountToRuleParam).then(
              resp=>{
                  if (resp.data.code==20000){
                      this.$message({
                          message: resp.data.message,
                          type: 'success'
                      });
                  }
                  else{
                      this.$message({
                          message: resp.data.message,
                          type: 'error'
                      });
                  }
              }
          )
            this.accFlag=false;
          this.toNull();
          console.log(this.accountToRuleParam);
        },
        toNull(){
          this.accountToRuleParam.checkList=[];
        },

        pageChange(){
          this.getAccounts();
        },
        loadAccountRules(id){
            this.$http.get("/woniuAccountRule/selRules/"+id).then(
                resp=>{
                    this.rules = resp.data.object.ruleDtos;
                    this.accountToRuleParam.checkList = resp.data.object.selIds;
                    console.log();
                }
            )
            this.accountToRuleParam.accountId = id;
            this.accFlag = true;
        }
    },
    created() {
      this.getAccounts();
    }
}
</script>

<style scoped>

</style>